<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 600px;
      margin: 50px auto 0;
      border: 1px solid #000;
    }

    #box>div {
      float: left;
      width: 33%;
      height: 33%;
      border: 1px solid #000;
      text-align: center;
      line-height: 200px;
      font-size: 25px;
      font-weight: bold;
    }

    #start {
      background-color: pink;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="box">
    <div class="option">30元话费券</div>
    <div class="option">5元红包</div>
    <div class="option">苹果电脑</div>
    <div class="option">再来一次</div>
    <div id="start">开始抽奖</div>
    <div class="option">腾讯视频会员</div>
    <div class="option">100元红包</div>
    <div class="option">10元话费券</div>
    <div class="option">华为手机</div>
  </div>

  <script>
    // 思路：
    // 1、点击开始抽奖，触发一个定时器
    // 2、在定时器内部随机一个数，通过这个数来获取奖品所在的元素
    // 3、设置一个时间点，停止定时器

    const start = document.getElementById('start');
    const options = document.getElementsByClassName('option');
    let timer = null;

    // 1、点击开始，触发定时器
    start.onclick = function () {
      let num = 0; // 设置一个初始值作为时间判断
      // 判断timer是否为null，防止开启多个定时器
      if (timer == null) {
        timer = setInterval(() => {
          num++;
          // 2、随机0~7之间的整数，通过数组下标获取选中的元素
          let res = Math.round(Math.random() * 7);
          // 在给选中的元素添加样式之前，需要把所有的元素都恢复原来的样式
          for (let i = 0; i < options.length; i++) {
            options[i].style.backgroundColor = '#fff';
          }
          // 给随机选中的元素添加背景颜色
          options[res].style.backgroundColor = 'orange';
          // 3、给定时器设置一个时间，停止定时器
          if (num >= 50) {
            clearInterval(timer);
            timer = null;
          }
        }, 100);
      }
    }
  </script>
</body>

</html>